<template>
  <div
    class="d-sm-flex flex-sm-row justify-content-sm-between m-3 align-items-sm-center"
  >
    <img class="logo" src="@/assets/images/logo.png" alt="logo" />
    <div class="search">
      <form @submit.prevent="search" class="form-inline">
        <input
          class="form-control mr-sm-2"
          type="search"
          v-model="searchText"
          autocomplete="off"
          placeholder="剑指offer"
        />
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">
          搜索
        </button>
      </form>
    </div>
    <router-link to="/car"
      ><button class="btn btn-primary">
        购物车 &nbsp;
        <span class="badge badge-light">{{ this.carList.length }}</span>
      </button></router-link
    >
    <div class="user-box">
      <!-- 未登录 -->
      <div v-if="!user" class="not-login">
        你好，请
        <span> <router-link to="/login"> 登录 </router-link> </span> ，免费
        <span><router-link to="/register"> 注册 </router-link></span>
      </div>

      <div v-else class="logined">
        {{ user.username }}
        <button class="btn btn-link" @click="logout">退出</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      searchText: "",
    };
  },
  computed: {
    ...mapState(["user", "carList"]),
  },
  methods: {
    search() {
      this.$router.push("/search/wd/" + this.searchText);
    },
    logout() {
      this.deleteUser();
      this.$router.push("/login");
    },
    ...mapMutations(["deleteUser"]),
  },
};
</script>

<style lang="scss">
.logo {
  height: 50px;
}
</style>
